@layout("/common/_container.html",{css:["/assets/expand/module/limarquee/css/liMarquee.css"],js:["/assets/modular/recy/orderForm/orderForm.js"]}){
<style>
    .site-doc-color{
        padding:20px;
    }
    .site-doc-color li{
        width:200px;
        height:70px;
        text-align:center;
        color:white;
        float:left;
        margin-right:20px;
    }
    .site-doc-color li p{
        line-height: 2;
    }
    body{
        color:white
    }
    .marqueeContainer.str_wrap{
        background:none;
    }
    .bgimg{
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        z-index:-10;
        zoom: 1;
        background-color: #fff;
        background: url(${ctxPath}/assets/common/images/stars.jpg) no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
    .layui-tab-title .layui-this{
        color:white
    }
    .rankings_table{
        width:100%;margin:0 auto;border-spacing:5px;border-collapse: separate;
    }
    .rankings_table td{
        border-bottom: 1px dotted white;
        padding:5px;
        line-height:2;
    }
    .rankings_table th{
        background-color: #353942;
        padding:5px;
        line-height:2;
    }
    .data-item{
        padding-top:10px;
        margin-left:50px;
    }
    .data-item .title{
        background:url(${ctxPath}/assets/common/images/title_bg.png) no-repeat;
        height:26px;
        color:white;
        line-height:26px;
        text-align:center;
    }
    .data-item .data{
        color:#fc9c24
    }
    .data-item .data .unit{
        color:white;
    }
</style>
<div class="bgimg">
<div>
    <div style="text-align:center;font-size:20px;font-weight:bold;line-height:70px;color:white;height:85px;background:url(${ctxPath}/assets/common/images/title.png) center center repeat-x;">${area}</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
    <div>
        <div style="clear:both;">
            <div style="text-align:center;font-size:18px;font-weight:bold"> 垃圾回收周趋势图</div>
            <div id="weekTrends" style="width: 90%;height:400px;"></div>
        </div>

    </div>
    <div style="">
        <div style="font-size:18px;font-weight:bold;color:white">各类垃圾实时回收数据：</div>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                @var hasShow = false;
                @for(wasteTypeName in wasteTypeNameMap){
                @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
                <li ${!hasShow && orderSize>0?"class='layui-this'":""}>${wasteTypeNameLP.index}.${wasteTypeName.value}</li>
                @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
                @}
            </ul>
            <div class="layui-tab-content">
                <!-- <div class="layui-tab-item layui-show">内容1</div>
                 <div class="layui-tab-item">内容2</div>
                 <div class="layui-tab-item">内容3</div>
                 <div class="layui-tab-item">内容4</div>
                 <div class="layui-tab-item">内容5</div>-->
                @hasShow = false;
                @for(wasteTypeName in wasteTypeNameMap){
                @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
                <div class="layui-tab-item ${!hasShow && orderSize>0?'layui-show':''}">
                    @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
                    @if(orderSize==0){
                    <div style="height:300px;">
                        暂无回收记录
                    </div>
                    @}else{
                    <div class="marquee-container">
                        <div class="marqueeContainer" style="height:300px;">
                            <table class="rankings_table" style="margin:0">
                                <thead>
                                <th>用户名</th>
                                <th>垃圾类别</th>
                                <th>垃圾重量</th>
                                <th>积分</th>
                                <th>回收时间</th>
                                </thead>
                                <tbody>

                                @for(order in resentOrderMap[wasteTypeName.value]){
                                <tr>
                                    <td>${order.userIdModel.userName!""}</td>
                                    <td>${wasteTypeName.value}</td>
                                    <td>${order.wasteWeight}克</td>
                                    <td>${order.price}</td>
                                    <td>${order.createTime,'yyyy-MM-dd HH:mm:ss'}</td>
                                </tr>
                                @}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @}
                </div>
                @}
            </div>
        </div>
    </div>


</div>
    <div class="layui-col-md6">
        <iframe src="${ctxPath}/assets/modular/recy/echarts3-map/index.html?city=${region.name}" width="100%" height="1000px" frameborder="0"></iframe>
        <!--<div id="mapContainer" style="width:100%;height:500px">

        </div>-->
    </div>
</div>
</div>

@}
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=k6hUNlqyGNy0xyK60Un9hpFe2a8Fxch1"></script>
<script>
    layui.use(["jquery","element","liMarquee"],function(){
        var element = layui.element;
        var $ = layui.jquery;
        $(".layui-body-header",window.parent.document).hide();
        $(".layui-body-header.show+div",window.parent.document).offset({top:50});
        $(".layui-footer",window.parent.document).hide();
        $(".layui-layout-admin .layui-body",window.parent.document).css("bottom","0");
        var liMarquee = layui.liMarquee;
        $('.marqueeContainer').liMarquee({direction: 'up'});
       var weekChart =  echarts.init(document.getElementById("weekTrends"))
       var weekOption = {
           legend: {
               textStyle: {
                   color:'white'
               }
           },
           textStyle:{
               color:'white'
           },
           tooltip: {},
           dataset: {
               source: [
                   ['product'
                   @for(wasteTypeName in wasteTypeNameMap){
                    ,'${wasteTypeName.value}'
                    @}
                   ]
                    @for(var index=0;index<8;index++){
                    ,["${dateStrs[index]}",
                   @for(wasteTypeName in wasteTypeNameMap){
                        ${wasteTypeNameLP.index==1?"":","}
                        @if(isEmpty(tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value])){
                            0
                        @}else{
                            ${tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value]}
                        @}
                   @}
                   ]
                    @}
               ]
           },
           xAxis: {type: 'category'},
           yAxis: {},
           // Declare several bar series, each will be mapped
           // to a column of dataset.source by default.
           series: [
           @for(wasteTypeName in wasteTypeNameMap){
                ${wasteTypeNameLP.index==1?"":","}{type: 'bar'}
            @}
           ]
       };
        weekChart.setOption(weekOption);


        })
</script>